<%--
  Created by IntelliJ IDEA.
  User: zhangzhiling
  Date: 2016/12/22
  Time: 11:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>多选下拉框</title>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" 	href="/static/xmenu/css/powerFloat.css" />
    <link type="text/css" rel="stylesheet" 	href="/static/xmenu/css/xmenu.css" />

    <style type="text/css">

        #lead{
            margin-left: 25px;
        }
        #hide-text{
            margin-left: -106px;
        }
        h2{
            margin-top: 40px;
            margin-left: auto;
            text-align: center;
        }
    </style>

    <script type="text/javascript" src="/static/xmenu/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/static/xmenu/js/jquery-powerFloat-min.js"></script>
    <script type="text/javascript" src="/static/xmenu/js/jquery-xmenu.js"></script>
</head>
<body>
<h2>演示多选下拉框</h2>

<!----------------多选下拉框------------->
<div id="main">
    <div id="lead" class="card">
        <h3>查看效果</h3>
        <p></p>
        <div class="topnav">
            <a id="selectpos" href="javascript:void(0);" class="as">
                <span>选择职位</span>
            </a>
        </div>
        <br>
        <%--<div class="topnav">--%>
        <%--<a id="selectdept" href="javascript:void(0);" class="as">--%>
        <%--<span>选择部门</span>--%>
        <%--</a>--%>
        <%--</div>--%>
        <p> </p>
        <h3>隐藏域值</h3>
        <pre id="hide-text">
                <input type="text" value="" id="selectposhidden" />
                <%--<input type="text" value="" id="selectdeptidden" />--%>
            </pre>
    </div>
    <!------------------ 点击弹出 ------------->
    <div id="m1" class="xmenu" style="display: none;">
        <div class="select-info">
            <label class="top-label">已选部门：</label>
            <ul></ul>

            <a name="menu-confirm" href="javascript:void(0);" class="a-btn">
                <span class="a-btn-text">确定</span>
            </a>
            <%--<a class="m-close a-btn" href="javascript:void(0);" >--%>
            <%--<span class="a-btn-text">取消</span>--%>
            <%--</a>--%>
        </div>
        <dl>
            <dt class="open">需求部门</dt>
            <dd>
                <ul>
                    <li rel="1"  class="">开发部</li>
                    <li rel="2">人事部</li>
                    <li rel="3">市场部</li>
                    <li rel="4" class="">业务部</li>
                    <li rel="5">财务部</li>
                </ul>
            </dd>
            <dt class="open">缺编部门</dt>
            <dd>
                <ul>
                    <li rel="15" class="">研发部</li>
                    <li rel="16">广告部</li>
                    <li rel="17">出纳部</li>
                    <li rel="18" class="">后勤部</li>
                </ul>
            </dd>
        </dl>
    </div>
</div>
<script type="text/javascript">
    $("#selectpos").xMenu({
        width :600,
        eventType: "click", //事件类型 支持focus click hover
        dropmenu:"#m1",//弹出层
        hiddenID : "selectposhidden"//隐藏域ID

    });
</script>
</body>
</html>
